<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<view class="header-left">
				<view class="back">
					<image src="../../static/image/register/back.webp"  @click="backGo"></image>
				</view>
			</view>
			<view class="header-right">
				<view class="text">
					<image src="../../static/image/detail/more.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 背景图片 -->
		<view class="bg">
			<view class="bg-top"></view>
			<image src="../../static/image/test-img/boom.jpg" mode="aspectFill"></image>
		</view>
		
		<!-- 中心 -->
		<view class="request-content">
			<!-- 头像 -->
			<view class="header-por">
				<image src="../../static/image/test-img/boom.jpg"></image>
			</view>
			<view class="user-name">左左左表妹</view>
			<view class="content-remarks">
				<textarea value="请求添加您为好友" maxlength="120" />
			</view>
			<view class="requset-addfriend">
				<view class="cancle"  @click="backGo">取消</view>
				<view class="confire">发送</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			backGo(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -2;

		.bg-top {
			width: 100%;
			height: 100%;
		}

		image {
			position: absolute;
			left: -40rpx;
			top: -40rpx;
			width: 110%;
			height: 110%;
			filter: blur(16px);
			opacity: 0.4;
			z-index: -1;
		}
	}
	
	.header{
		z-index: 100;
		width: 100%;
		height: 88rpx;
		padding-top: var(--status-bar-height);
		background: #ffffff;
		// border-bottom: 2rpx solid rgba(39,40,50,0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;	
		margin-bottom: 198rpx;
		.header-left{
			line-height: 88rpx;
			.back{
				font-size: 36rpx;
				color: #333333;
				font-weight: 500;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 24rpx;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.header-right{
			.text{
				font-size: 36rpx;
				color: #333333;
				font-weight: 500;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 32rpx;
				image{
					width: 52rpx;
					height: 12rpx;
				}
			}
		}
	}
	
	.request-content{
		height: 1170rpx;
		background: #FFFFFF;
		border-radius: 40.4rpx;
		padding: 168rpx 56rpx 0 56rpx;
		position: relative;
		// 头像
		.header-por{
			position: absolute;
			left: 60rpx;
			top:-120rpx;
			image{
				width: 240rpx;
				height: 240rpx;
				border: 6rpx solid #FFFFFF;
				box-shadow: 0rpx 36rpx 40rpx 0rpx rgba(39,40,50,0.1);
				border-radius: 120rpx;
			}
		}
		.user-name{
			font-family: PingFangSC-Regular;
			font-size: 52rpx;
			color: #272832;
			letter-spacing: -1.78rpx;
			font-weight: 400;
			margin-bottom: 40rpx;
		}
		.content-remarks{
			height: 520rpx;
			background: #F3F4F6;
			border-radius: 20rpx;
			padding: 18rpx 22rpx;
			margin-bottom: 94rpx;
		}
		.requset-addfriend{
			position: absolute;
			bottom: 8rpx;
			left: 34rpx;
			.cancle{
				float: left;
				text-align: center;
				line-height: 80rpx;
				width: 172rpx;
				height: 80rpx;
				background: rgba(39,40,50,0.10);
				border-radius: 10rpx;
			}
			.confire{
				float: right;
				margin-left: 32rpx;
				text-align: center;
				line-height: 80rpx;
				width: 480rpx;
				height: 80rpx;
				background: #FFE431;
				border-radius: 10rpx;
			}
		}
	}
	
	
</style>
